<template>
    <div class="default-main">
        <el-card shadow="hover" header="技师概况">
            <div class="dashboard">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <el-icon :size="30">
                                        <UserFilled/>
                                    </el-icon>
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">0</div>
                                    <div class="dashboard-card-title">技师总数</div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <el-icon :size="30">
                                        <View/>
                                    </el-icon>
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">0</div>
                                    <div class="dashboard-card-title">当前在线技师人数
                                    </div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <el-icon :size="30">
                                        <Hide/>
                                    </el-icon>
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">0</div>
                                    <div class="dashboard-card-title">休息技师人数
                                    </div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <el-icon :size="30">
                                        <View/>
                                    </el-icon>
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">0</div>
                                    <div class="dashboard-card-title">接单技师人数

                                    </div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">


import {Hide, UserFilled, View} from "@element-plus/icons-vue";
import headerSvg from '/@/assets/dashboard/header-1.svg'

defineOptions({
    name: 'dashboard',
})


</script>

<style scoped lang="scss">
.dashboard-card-content {
    font-size: 20px;
    color: #606266;
}
</style>
